<div id="dialog-editutilitydevice" title="Edit Device">
    <form>
        <table class="display" id="metertable" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td align="right" style="width:120px"><label>Idx: </label></td>
			<td><span id="deviceidx" /></td>
        </tr>
        <tr>
          <td align="right"><label for="devicename"><span data-i18n="Name">Name</span>: </label></td>
          <td><input type="text" id="devicename" style="width: 250px; padding: .4em;" class="text ui-widget-content ui-corner-all" /></td>
        </tr>
		<tr>
			<td align="right"><label for="devicedescription"><span data-i18n="Description"></span>: </label></td>
			<td><textarea id="devicedescription" name="devicedescription" rows="4" style="width: 356px; padding: .2em;" class="text ui-widget-content ui-corner-all"></textarea></td>
		</tr>
		</table>
    </form>
</div>
<div id="dialog-editcustomsensordevice" title="Edit Device">
    <form>
        <table class="display" id="metertable" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td align="right" style="width:200px"><label>Idx: </label></td>
			<td><span id="deviceidx" /></td>
        </tr>
        <tr>
          <td align="right"><label for="devicename"><span data-i18n="Name">Name</span>: </label></td>
          <td><input type="text" id="devicename" style="width: 250px; padding: .4em;" class="text ui-widget-content ui-corner-all" /></td>
        </tr>
		<tr>
			<td align="right"><label for="sensoraxis"><span data-i18n="Axis Label"></span>:</label></td>
			<td><input type="text" id="sensoraxis" style="width: 240px; padding: .2em;" class="text ui-widget-content ui-corner-all" /></td>
		</tr>
		<tr>
			<td align="right"><label for="combosensoricon"><span data-i18n="Sensor Icon"></span>: </label></td>
			<td>
				<select id="combosensoricon" style="width:200px" class="combobox ui-corner-all">
				</select>
			</td>
		</tr>
		<tr>
			<td align="right" style="width:120px"><label for="devicedescription"><span data-i18n="Description"></span>: </label></td>
			<td><textarea id="devicedescription" name="devicedescription" rows="4" style="width: 356px; padding: .2em;" class="text ui-widget-content ui-corner-all"></textarea></td>
		</tr>
		</table>
    </form>
</div>
<div id="dialog-editmeterdevice" title="Edit Device">
    <form>
        <table class="display" id="metertable" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td align="right" style="width:120px"><label>Idx: </label></td>
			<td><span id="deviceidx" /></td>
        </tr>
        <tr>
          <td align="right"><label for="devicename"><span data-i18n="Name">Name</span>: </label></td>
          <td><input type="text" id="devicename" style="width: 250px; padding: .4em;" class="text ui-widget-content ui-corner-all" /></td>
        </tr>
		<tr>
			<td align="right"><label for="devicedescription"><span data-i18n="Description"></span>: </label></td>
			<td><textarea id="devicedescription" name="devicedescription" rows="4" style="width: 356px; padding: .2em;" class="text ui-widget-content ui-corner-all"></textarea></td>
		</tr>
        <tr>
          <td align="right"><label for="combometertype"><span data-i18n="Type">Type</span>: </label></td>
          <td><select id="combometertype" style="width:150px" class="combobox ui-corner-all">
            <!--#embed metertypes -->
          </select></td>
		</tr>
        <tr>
          <td align="right"><label for="meterdivider"><span data-i18n="Counter Divider">Counter Divider</span>: </label></td>
          <td><input type="text" id="meterdivider" style="width: 60px; padding: .4em;" class="text ui-widget-content ui-corner-all" />&nbsp;<span data-i18n="(0 = Application default)">(0 = Application default)</span></td>
		</tr>
		<tr id="tdmeteroffset">
          <td align="right"><label for="meteroffset"><span data-i18n="Meter Offset">Meter Offset</span>: </label></td>
          <td><input type="text" id="meteroffset" style="width: 120px; padding: .4em;" class="text ui-widget-content ui-corner-all" /></td>
		</tr>
        <tr id="customcounter">
          <td align="right"><label for="valuequantity"><span data-i18n="Value Quantity (e.g. Weight)">Value Quantity (e.g. Weight)</span>: </label></td>
          <td><input type="text" id="valuequantity" style="width: 140px; padding: .4em;" class="text ui-widget-content ui-corner-all" /></td>
        </tr>
        <tr id="customcounter">
          <td align="right"><label for="valueunits"><span data-i18n="Value Units (e.g. Kg)">Value Units (e.g. Kg)</span>: </label></td>
          <td><input type="text" id="valueunits" style="width: 140px; padding: .4em;" class="text ui-widget-content ui-corner-all" /></td>
        </tr>
		</table>
    </form>
</div>
<div id="dialog-editenergydevice" title="Edit Device">
    <form>
        <table class="display" id="energytable" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td align="right" style="width:120px"><label>Idx: </label></td>
			<td><span id="deviceidx" /></td>
        </tr>
        <tr>
          <td align="right"><label for="devicename"><span data-i18n="Name">Name</span>: </label></td>
          <td><input type="text" id="devicename" style="width: 250px; padding: .4em;" class="text ui-widget-content ui-corner-all" /></td>
        </tr>
		<tr>
			<td align="right"><label for="devicedescription"><span data-i18n="Description"></span>: </label></td>
			<td><textarea id="devicedescription" name="devicedescription" rows="4" style="width: 356px; padding: .2em;" class="text ui-widget-content ui-corner-all"></textarea></td>
		</tr>
        <tr>
          <td align="right"><label for="combometertype"><span data-i18n="Type">Type</span>: </label></td>
          <td><select id="combometertype" style="width:150px" class="combobox ui-corner-all">
            <option value="0" data-i18n="Usage">Usage</option>
            <option value="4" data-i18n="Return">Return</option>
          </select></td>
		</tr>
        <tr>
             <td align="right"><label for="EnergyMeterMode"><span data-i18n="Energy read">Energy read</span>: </label></td>
             <td>
             <input type="radio" name="EnergyMeterMode" id="EnergyMeterMode2" value="1" >&nbsp;&nbsp;<span data-i18n="Computed">&nbsp;&nbsp;Computed</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|
             <input type="radio" name="EnergyMeterMode" id="EnergyMeterMode1" value="0" checked>&nbsp;&nbsp;<span data-i18n="From device">From device</span>
             </td>
        </tr>
		</table>
    </form>
</div>
<div id="dialog-editdistancedevice">
    <form>
        <table class="display" id="edittable" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td align="right" style="width:120px"><label>Idx: </label></td>
			<td><span id="deviceidx" /></td>
        </tr>
        <tr>
          <td align="right"><label><span data-i18n="Name">Name</span>: </label></td>
          <td><input type="text" id="devicename" style="width: 250px; padding: .2em;" class="text ui-widget-content ui-corner-all" /></td>
        </tr>
		<tr>
			<td align="right"><label for="devicedescription"><span data-i18n="Description"></span>: </label></td>
			<td><textarea id="devicedescription" name="devicedescription" rows="4" style="width: 356px; padding: .2em;" class="text ui-widget-content ui-corner-all"></textarea></td>
		</tr>
        <tr>
          <td align="right"><label><span data-i18n="Display">Display</span>: </label></td>
          <td>
			<select id="combometertype" style="width:150px" class="combobox ui-corner-all">
				<option value="0">Centimeters</option>
				<option value="1">Inches</option>
			</select>
		  </td>
        </tr>
		</table>
    </form>
</div>
<div id="dialog-editsetpointdevice" title="Edit Device">
    <form>
        <table class="display" id="metertable" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td align="right" style="width:120px"><label>Idx: </label></td>
			<td><span id="deviceidx" /></td>
        </tr>
        <tr>
          <td align="right"><label for="devicename"><span data-i18n="Name">Name</span>: </label></td>
          <td><input type="text" id="devicename" style="width: 250px; padding: .4em;" class="text ui-widget-content ui-corner-all" /></td>
        </tr>
		<tr>
			<td align="right"><label for="devicedescription"><span data-i18n="Description"></span>: </label></td>
			<td><textarea id="devicedescription" name="devicedescription" rows="4" style="width: 356px; padding: .2em;" class="text ui-widget-content ui-corner-all"></textarea></td>
		</tr>
		<tr>
			<td align="right"><span data-i18n="Protected">Protected</span>:</td>
			<td><input type="checkbox" id="protected"><label for="protected"/></td>
		</tr>
        <tr>
          <td align="right"><label><span data-i18n="Value">Value</span>: </label></td>
          <td><input type="text" id="setpoint" style="width: 50px; padding: .4em;" class="text ui-widget-content ui-corner-all" /> &deg; <span id="tempunit">C</span></td>
		</tr>
		</table>
    </form>
</div>
<div id="dialog-editthermostatclockdevice" title="Edit Device">
    <form>
        <table class="display" id="metertable" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td align="right" style="width:120px"><label>Idx: </label></td>
			<td><span id="deviceidx" /></td>
        </tr>
        <tr>
          <td align="right"><label for="devicename"><span data-i18n="Name">Name</span>: </label></td>
          <td><input type="text" id="devicename" style="width: 250px; padding: .4em;" class="text ui-widget-content ui-corner-all" /></td>
        </tr>
		<tr>
			<td align="right"><label for="devicedescription"><span data-i18n="Description"></span>: </label></td>
			<td><textarea id="devicedescription" name="devicedescription" rows="4" style="width: 356px; padding: .2em;" class="text ui-widget-content ui-corner-all"></textarea></td>
		</tr>
		<tr>
			<td align="right"><span data-i18n="Protected">Protected</span>:</td>
			<td><input type="checkbox" id="protected"><label for="protected"/></td>
		</tr>
		<tr>
			<td align="right"><label><span data-i18n="Day">Day</span>: </label></td>
            <td><select id="comboclockday" name="comboclockday" style="width:200px" class="combobox ui-corner-all">
                <option value="0" data-i18n="Monday">Monday</option>
                <option value="1" data-i18n="Tuesday">Tuesday</option>
                <option value="2" data-i18n="Wednesday">Wednesday</option>
                <option value="3" data-i18n="Thursday">Thursday</option>
                <option value="4" data-i18n="Friday">Friday</option>
                <option value="5" data-i18n="Saturday">Saturday</option>
                <option value="6" data-i18n="Sunday">Sunday</option>
            </select></td>
		</tr>
        <tr>
          <td align="right"><label><span data-i18n="Hour">Hour</span>: </label></td>
          <td><input type="text" id="clockhour" style="width: 50px; padding: .4em;" class="text ui-widget-content ui-corner-all" /></td>
		</tr>
        <tr>
          <td align="right"><label><span data-i18n="Minute">Minute</span>: </label></td>
          <td><input type="text" id="clockminute" style="width: 50px; padding: .4em;" class="text ui-widget-content ui-corner-all" /></td>
		</tr>
		</table>
    </form>
</div>
<div id="dialog-editthermostatmode" title="Edit Device">
    <form>
        <table class="display" id="metertable" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td align="right" style="width:120px"><label>Idx: </label></td>
			<td><span id="deviceidx" /></td>
        </tr>
        <tr>
          <td align="right"><label for="devicename"><span data-i18n="Name">Name</span>: </label></td>
          <td><input type="text" id="devicename" style="width: 250px; padding: .4em;" class="text ui-widget-content ui-corner-all" /></td>
        </tr>
		<tr>
			<td align="right"><label for="devicedescription"><span data-i18n="Description"></span>: </label></td>
			<td><textarea id="devicedescription" name="devicedescription" rows="4" style="width: 356px; padding: .2em;" class="text ui-widget-content ui-corner-all"></textarea></td>
		</tr>
		<tr>
			<td align="right"><span data-i18n="Protected">Protected</span>:</td>
			<td><input type="checkbox" id="protected"><label for="protected"/></td>
		</tr>
		<tr>
			<td align="right"><label><span data-i18n="Mode">Mode</span>: </label></td>
            <td><select id="combomode" name="combomode" style="width:200px" class="combobox ui-corner-all">
                <option value="0" data-i18n="0">Auto Changeover</option>
                <option value="1" data-i18n="1">Tuesday</option>
                <option value="2" data-i18n="2">Wednesday</option>
                <option value="3" data-i18n="3">Thursday</option>
                <option value="4" data-i18n="4">Friday</option>
                <option value="5" data-i18n="5">Saturday</option>
                <option value="6" data-i18n="6">Sunday</option>
            </select></td>
		</tr>
		</table>
    </form>
</div>

<div class="container">
	<gz-back-to-top></gz-back-to-top>
	<div id="utilitycontent"></div>
</div>

<div id="percentagelog" style="display:none;">
  <h2 data-i18n="Day">Day</h2>
  <div id="percentagedaygraph" style="height: 300px;"></div>
  <br>
  <h2 data-i18n="Month">Month</h2>
  <div id="percentagemonthgraph" style="height: 300px;"></div>
  <br>
  <h2 data-i18n="Year">Year</h2>
  <div id="percentageyeargraph" style="height: 300px;"></div>
</div>

<div id="fanlog" style="display:none;">
  <h2 data-i18n="Day">Day</h2>
  <div id="fandaygraph" style="height: 300px;"></div>
  <br>
  <h2 data-i18n="Month">Month</h2>
  <div id="fanmonthgraph" style="height: 300px;"></div>
  <br>
  <h2 data-i18n="Year">Year</h2>
  <div id="fanyeargraph" style="height: 300px;"></div>
</div>
